
<template>
    <div class="login">
        <!--1.加上rules属性即开启表单验证规则，rules动态绑定了一个对象，对象在script里面定义，对象里面包含的是要验证的表单字段-->
        <!--4.ref相当于给了el-form一个验证的时候使用的唯一名称-->
        <!--model让表单动态绑定一个数据对象-->

        <el-form :rules="rules" ref="loginForm" :model="loginForm" class="loginContainer">
            <h3 class="loginTitle">系统登录</h3>

            <!--3.prop的值与rules里面要验证的字段值是对应的，在对应的标签上我们让prop等于rules里面对应的字段值-->
            <el-form-item prop="account">
                <el-input type="text" auto-complete="false" v-model="loginForm.account" placeholder="请输入内容">
                    <i slot="prefix" class="iconfont icon-icon_account"></i>
                </el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input :type="eyePwd ? 'text' : 'password'" auto-complete="false" v-model="loginForm.password"
                    placeholder="请输入内容">
                    <i slot="prefix" class="iconfont icon-tianchongxing-"></i>
                    <i slot="suffix" @click="pwd" class="iconfont"
                        :class="{ 'icon-yanjing': eyePwd, 'icon-biyanjing': !eyePwd }"></i>
                </el-input>

            </el-form-item>
            <!--5.@click绑定了一个点击事件-->
            <el-button type="primary" style="width: 100%" @click="submitLogin">登录</el-button>
        </el-form>
    </div>
</template>
<script>
import axios from '@/utils/request'
import { addRouteByRole } from '@/router'
export default {
    name: "Login",
    data() {
        // 自定义验证规则
        // callback 用来发送结果
        const validatePass = (rule, value, callback) => {
            if (value == /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$/) {
                callback()
            } else {
                callback(new Error('账号必须6-12位的字母与数字结合'));
            }
        }
        return {
            eyePwd: false,
            loginForm: {
                account: '',
                password: '',
            },


            //2.我们把要进行验证的字段都放进rules对象里
            rules: {
                account: [
                    // 非空验证
                    // required： 必须要输入，  message： 报错信息（展示在表单项周围）， trigger：什么时候去校验：   blur（失去焦点）  change（改变）
                    { required: true, message: '请将账号输入完整', trigger: 'blur' },
                    // { validator: validatePass, trigger: 'change' }
                ],
                password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
            }
        }
    },
    methods: {
        pwd() {
            this.eyePwd = !this.eyePwd
        },
        //6.点击事件
        submitLogin() {
            //7.
            //这里refs.后面的loginForm与el-form表单中的ref属性值是对应的
            //validate：对整个表单进行校验的方法，参数为一个回调函数。这里给了一个返回值valid，为Boolean类型，表示校验是否成功


            this.$refs.loginForm.validate((valid) => {
                if (valid) {
                    axios.post('/users/checkLogin', this.loginForm).then((res) => {
                        if (res.data.code == 0) {
                            this.$message({
                                message: '登录成功！',
                                type: 'success',

                            });
                            localStorage.setItem('token', res.data.token)
                            localStorage.setItem('role', res.data.role)
                            // console.log(res.data.token);
                            addRouteByRole()
                            console.log(this.$router.getRoutes())

                            // 刷新页面
                            // location.reload()
                            this.$router.push('/home')

                        } else {
                            // this.$message.error('登录失败！')
                            return false;
                        }
                    })
                }
            })
        }
    },

}
</script>
<style lang="less" scoped>
.login {
    width: 100vw;
    height: 100vh;
    background-color: #2d3a4b;
    display: flex;
    justify-content: center;
    align-items: center;

}

// el-input__inner
/deep/ .el-input__inner {
    background-color: #2d3a4b;
    color: #fff;
    height: 32px;
}

/deep/ .el-button {
    height: 32px;
}

.loginContainer {
    width: 400px;
}

.loginTitle {

    text-align: center;
    font-weight: 600;
    margin-bottom: 20px;
    color: #fff;

}
</style>